<template>
    <div class="system-param-config-container">
        <el-form :inline="true" ref="form" class="system-search-form" :model="searchForm">
            <el-form-item>
                <el-cascader
                    class="go-out"
                    v-model="searchForm.mechanism"
                    :options="mechanismList"
                    :show-all-levels="false"
                    :props="{ checkStrictly: true, emitPath: false }"
                    filterable
                    size="small">
                </el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button class="sub-btn" type="primary" size="small" @click="getData">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="table-box">
            <el-table
                :data="tableData"
                tooltip-effect="light"
                border
                :max-height="tableHeight"
                style="width: 100%">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="参数名称"
                    width="260">
                    <template slot-scope="scope">
                        {{scope.row.name === '客户端使用模式' ? 'winform版小助手查看模式' : scope.row.name}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="value"
                    label="参数">
                    <template slot-scope="scope">
                        <el-select v-if="scope.row.name === '病案详情查看时间'" size="mini" v-model="scope.row.value" placeholder="请选择">
                            <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-else-if="scope.row.name === '科室使用模式'" v-model="scope.row.value" size="mini" placeholder="请选择">
                            <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <el-checkbox-group v-else-if="scope.row.name === '客户端使用模式'" v-model="scope.row.value">
                            <el-checkbox label="显示搜索框"></el-checkbox>
                            <el-checkbox label="显示首页详情窗口"></el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-table-column>
                <el-table-column
                    width="160"
                    prop="modifyTime"
                    align="center"
                    label="更新时间">
                </el-table-column>
                <el-table-column
                    width="120"
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" v-auth="{code: 300007000001}" @click="clickSave(scope.$index, scope.row)">保存</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {getParamsDataMenu, saveParamsData} from '@/api/system/param-config'

    export default {
        name: 'index',
        data () {
            return {
                // 搜索表单
                searchForm: {
                    mechanism: ''
                },
                // 机构列表
                mechanismList: [],
                // 表格数据
                tableData: [],
                // 表格高度
                tableHeight: 100,
                // 下拉框
                options1: [{
                    name: '永久',
                    value: '0'
                }, {
                    name: '一个月',
                    value: '1'
                }, {
                    name: '三个月',
                    value: '3'
                }, {
                    name: '半年',
                    value: '6'
                }, {
                    name: '一年',
                    value: '12'
                }, {
                    name: '两年',
                    value: '24'
                }, {
                    name: '三年',
                    value: '36'
                }, {
                    name: '五年',
                    value: '60'
                }, {
                    name: '十年',
                    value: '120'
                }],
                // 下拉框
                options2: [{
                    name: '仅使用编码',
                    value: '0'
                }, {
                    name: '同时使用编码和名称',
                    value: '1'
                }],
                // 使用储存的数据，不去请求
                useStore: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStore = this.$route.query.tags === 'tags'
            let height = document.documentElement.clientHeight - 213 - 10 - 78 - 5
            this.tableHeight = height > 107 ? height : 107
            this.getMechanismList()
            this.initData()
            this.getData()
        },
        mounted () {
            window.onresize = () => {
                // 213=其他元素高度60+50+48+55 10=距离底部边距 78=分页组件高度 5=适应性调整
                let height = document.documentElement.clientHeight - 213 - 10 - 78 - 5
                this.tableHeight = height > 107 ? height : 107
            }
        },
        methods: {
            /**
             * 初始化页面参数
             */
            initData () {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                if (JSON.stringify(query) !== '{}') {
                    this.searchForm.mechanism = query.orgId
                }
            },
            /**
             * 获取机构列表
             */
            getMechanismList () {
                let mechanismList = this.getLocalStorage('userInfo', 'mechanism')
                let parentList = []
                mechanismList.forEach(item => {
                    // 一级机构
                    if (!item.pid) {
                        parentList.push({
                            value: item.id,
                            label: item.name,
                            children: []
                        })
                        // 有一级机构的二级机构
                        mechanismList.forEach(it => {
                            if (it.pid === item.id) {
                                parentList[parentList.length - 1].children.push({
                                    value: it.id,
                                    label: it.name,
                                    children: null
                                })
                            }
                        })
                        if (!parentList[parentList.length - 1].children.length) {
                            parentList[parentList.length - 1].children = null
                        }
                    } else {
                        // 二级机构
                        let parent = mechanismList.filter(i => item.pid === i.id)
                        if (!parent.length) {
                            parentList.push({
                                value: item.id,
                                label: item.name,
                                children: null
                            })
                        }
                    }
                })
                this.mechanismList = parentList
                if (this.mechanismList.length) {
                    if (this.getLocalStorage('userMechanism', 'id') && this.hasMechanismId(this.getLocalStorage('userMechanism', 'id'))) {
                        this.searchForm.mechanism = this.getLocalStorage('userMechanism', 'id')
                    } else {
                        this.searchForm.mechanism = parentList[0].value
                    }
                }
            },
            /**
             * 判断所属机构是否在组织机构中
             * @param id 所属机构id
             */
            hasMechanismId (id) {
                let res = this.mechanismList.filter(item => item.value === id)
                return res.length !== 0
            },
            /**
             * 获取表格数据
             */
            getData () {
                let params = {
                    orgId: this.searchForm.mechanism
                }
                this.setGetStore(this.$route.name, params)
                if (this.getSession(this.$route.name, 'getParamsDataMenu') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getParamsDataMenu')
                    if (res.code.toString() === '200') {
                        this.tableData = [
                            {
                                orgId: this.searchForm.mechanism,
                                name: '病案详情查看时间',
                                value: '0',
                                modifyTime: ''
                            }, {
                                orgId: this.searchForm.mechanism,
                                name: '科室使用模式',
                                value: '0',
                                modifyTime: ''
                            }, {
                                orgId: this.searchForm.mechanism,
                                name: '客户端使用模式',
                                value: ['显示搜索框', '显示首页详情窗口'],
                                modifyTime: ''
                            }
                        ]
                        res.data.forEach(item => {
                            switch (item.name) {
                            case '病案详情查看时间':
                                this.tableData[0].value = item.value
                                this.tableData[0].modifyTime = item.modifyTime
                                break
                            case '科室使用模式':
                                this.tableData[1].value = item.value
                                this.tableData[1].modifyTime = item.modifyTime
                                break
                            case '科室使用客户端使用模式模式':
                                if (item.value === 0) {
                                    this.tableData[2].value = []
                                } else if (item.value === 1) {
                                    this.tableData[2].value = ['显示首页详情窗口']
                                } else if (item.value === 2) {
                                    this.tableData[2].value = ['显示搜索框']
                                } else if (item.value === 3) {
                                    this.tableData[2].value = ['显示搜索框', '显示首页详情窗口']
                                }
                                this.tableData[2].modifyTime = item.modifyTime
                                break
                            }
                        })
                    }
                } else {
                    getParamsDataMenu(params.orgId).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getParamsDataMenu: res})
                        if (res.code.toString() === '200') {
                            this.tableData = [
                                {
                                    orgId: this.searchForm.mechanism,
                                    name: '病案详情查看时间',
                                    value: '0',
                                    modifyTime: ''
                                }, {
                                    orgId: this.searchForm.mechanism,
                                    name: '科室使用模式',
                                    value: '0',
                                    modifyTime: ''
                                }, {
                                    orgId: this.searchForm.mechanism,
                                    name: '客户端使用模式',
                                    value: ['显示搜索框', '显示首页详情窗口'],
                                    modifyTime: ''
                                }
                            ]
                            res.data.forEach(item => {
                                switch (item.name) {
                                case '病案详情查看时间':
                                    this.tableData[0].value = item.value
                                    this.tableData[0].modifyTime = item.modifyTime
                                    break
                                case '科室使用模式':
                                    this.tableData[1].value = item.value
                                    this.tableData[1].modifyTime = item.modifyTime
                                    break
                                case '客户端使用模式':
                                    if (item.value === '0') {
                                        this.tableData[2].value = []
                                    } else if (item.value === '1') {
                                        this.tableData[2].value = ['显示首页详情窗口']
                                    } else if (item.value === '2') {
                                        this.tableData[2].value = ['显示搜索框']
                                    } else if (item.value === '3') {
                                        this.tableData[2].value = ['显示搜索框', '显示首页详情窗口']
                                    }
                                    this.tableData[2].modifyTime = item.modifyTime
                                    break
                                }
                            })
                        } else {
                            this.$message.error(res.message)
                        }
                    })
                }
            },
            clickSave (index, row) {
                if (row.name === '测算模式') {
                    let text = `修改"测算模式"将对测算结果产生重大影响！您确定修改并保存"测算模式"为"${row.value.测算模式}"吗?`
                    let title = '确认保存'
                    this.$confirm(text, title, {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        this.saveData(index, row)
                    }).catch()
                } else {
                    this.saveData(index, row)
                }
            },
            /**
             * 保存修改
             * @param index 索引
             * @param row 行数据
             */
            saveData (index, row) {
                let params = {
                    orgId: row.orgId || this.searchForm.mechanism,
                    name: row.name,
                    value: row.value
                }
                if (params.name === '客户端使用模式') {
                    if (params.value.length === 2) {
                        params.value = '3'
                    } else if (params.value.length === 0) {
                        params.value = '0'
                    } else if (params.value.includes('显示搜索框')) {
                        params.value = '2'
                    } else if (params.value.includes('显示首页详情窗口')) {
                        params.value = '1'
                    }
                }
                saveParamsData(params).then(res => {
                    if (res.code.toString() === '200') {
                        this.$message.success('保存成功')
                        this.getData()
                    } else {
                        this.$message.error(res.message)
                    }
                })
            }
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style lang="scss" scoped>
    .system-param-config-container {
        .system-search-form {
            .el-form-item {
                margin-bottom: 0;
            }
        }
        .table-box {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            height: calc(100vh - 183px);
            .add-btn {
                margin-bottom: 10px;
            }
            .table-input {
                .el-input {
                    width: 100px;
                    margin-right: 10px;
                }
            }
        }
    }
</style>
